<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>Color Admin | Page with Footer</title>
<meta
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
	name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />

<!-- ================== BEGIN BASE CSS STYLE ================== -->
<%@ include file="../include/inc_head.jsp"%>
<!-- ================== END BASE CSS STYLE ================== -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="/assets/plugins/pace/pace.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/orderStatus.css"> 
<!-- ================== END BASE JS ================== -->
</head>
<style>
.form-horizontal.form-bordered .form-group>.control-label {
    padding: 20px 158px 15px;
    border-right: 1px solid #eee;
    margin-right: -1px;
}
.form-horizontal.form-bordered .form-group>div {
    padding: 20px;
    border-left: 1px solid #eee;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle; 
    border-top: 1px solid #ddd;
}
</style>
<body>
	<!-- begin #page-loader -->
	<div id="page-loader" class="fade in">
		<span class="spinner"></span>
	</div>
	<!-- end #page-loader -->

	<!-- begin #page-container -->
	<div id="page-container"
		class="fade page-sidebar-fixed page-header-fixed">
		<!-- begin #header -->
		<%@ include file="../include/inc_header.jsp"%>
		<!-- end #header -->

		<!-- begin #sidebar -->
		<%@ include file="../include/inc_left.jsp"%>
		<!-- end #sidebar -->

		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">首页</a></li>
				<li class="active">采购单详情</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">采购单详情</h1>
				<button type="button" class="btn btn-primary m-r-5 m-b-5" onclick="back();">返回</button>
			<!-- end page-header -->
			   
			
 					 <div class="table-responsive">
                        <table id="user" class="table table-bordered table-striped">
                            <thead>
                             <tr>
                                    <td style="width:220px;font-weight:900;font-size: 16px;">采购单信息</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width:320px;">采购单ID:<a href="#"  style="margin-left: 30px;"><span id="proId"></span></a></td>
                                    <td >申请来源:<a href="#" style="margin-left: 30px;"><span id="sourceName"></span></a></td>
                                </tr>
                           
                                 <tr>
                                  <td>送货时间:<a href="#" style="margin-left: 30px;"><span id="sDate"></span></a></td>
                                    <td style="width:320px;">申请时间:<a href="#" style="margin-left: 30px;" ><span id="eDate"></span></a></td>
                                </tr>  
                                <tr>
                                  <td>SKU数量:<a href="#" style="margin-left: 30px;"><span id="skuNum"></span></a></td>
                                    <td style="width:320px;">采购总金额:<a href="#" style="margin-left: 30px;" >￥<span id="totalPrice"></span></a></td>
                                </tr>  
                                 <tr>
                                    <td style="width:320px;" colspan="2">采购状态:<a href="#" style="margin-left: 30px;"><span id="status"></span></a></td>
                                                                                            
                                </tr>
                            </tbody>
                        </table>                          
                    </div>
                            <div class="panel panel-inverse" data-sortable-id="table-basic-1">
                        <div class="panel-heading" style="background: #a5bcd2;">
                            <h4 class="panel-title">采购单商品</h4>
                        </div>
                        <div class="panel-body">
                        	<div class="table-responsive">

								<table class="table">
									<thead>
										<tr>
											<th>#</th>
                                            <th>SKUID</th>
											<th>商品名称</th>
											<th>采购数量</th>
                                            <th>采购重量(KG)</th>
											<th>采购单价（元）</th>
											<th>采购总价（元）</th>
										</tr>
									</thead>
									<tbody >
									<c:forEach items="${listData}" var="item" varStatus="list">

										<tr>
											<td>${list.index+1}</td>
											<td>${item.skuCode}</td>
											<td>${item.skuName}</td>
											<th>${item.expectNum/1000}</th>
											<th>${item.expectWeight/1000}</th>
											<th>${item.unitPrice}</th>
											<th>￥${item.totalPrice}</th>
										</tr>
									</c:forEach>
										</tr>
									</tbody>
									<tfoot>
									<tr>

										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th>总计：￥<span id="totalPrices"></span>（元）</th>
									</tr>
									</tfoot>
								</table>
                            </div>
                        </div>
                    </div>

		</div>
		<!-- end #content -->

		<%@ include file="../include/inc_footer.jsp"%>
		<!-- begin scroll to top btn -->
		<a href="javascript:;"
			class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
			data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- end scroll to top btn -->
	</div>
	<!-- end page container -->

	<!-- ================== BEGIN BASE JS ================== -->
	<%@ include file="../include/inc_foot.jsp"%>

	<!-- ================== END BASE JS ================== -->

	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script src="/assets/plugins/DataTables/media/js/jquery.dataTables.js"></script>
	<script src="/assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js"></script>
	<script src="/assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
	<script src="/assets/js/table-manage-default.demo.min.js"></script>
	<script src="/assets/js/apps.min.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->

	<script>
		$(document).ready(function() {
			App.init();
			TableManageDefault.init();
			initStatus(5);

			$('#proId').html($.getRequestParameter('id'));

            $('#sourceName').html(decodeURI($.getRequestParameter('applySourceName')));

            $('#status').html(decodeURI($.getRequestParameter('statusName')));

            $('#eDate').html($.myTime.UnixToDate($.getRequestParameter('applyDateTime'),true,8));


            $('#sDate').html($.myTime.UnixToDate($.getRequestParameter('deliveryDateTime'),true,8));

            $('#totalPrice').html($.getRequestParameter('totalPrice'));

            $('#totalPrices').html($.getRequestParameter('totalPrice'));
            $('#skuNum').html($.getRequestParameter('skuNum'));



		});
		
		function back(){
			history.go(-1);
		}
		
		function initStatus(index){
			if(index==-1){
				$('#status-1').show();
			for(var j=0;j<7;j++){
				$('#status'+j).hide();
			}
			return;
			}
				$('#status-1').hide();
				$("#status"+index).attr("class","step-cur");
			if(index>0){
				for(var i=0;i<=index-1;i++){
					$("#status"+i).attr("class","step-done");
				}
				for(var a=index+1;a<=6;a++){
					$("#status"+a).attr("class","ss");
				}
			}else{
				$("#status0"+index).attr("class","step-cur");
				for(var s=1;s<7;s++){
					$("#status"+s).attr("class","ss");
				}
			}
		}





	</script>

	<script>

        $.extend({
            getRequestParameter:function(name){
                //为了调试，把window.location.search 替换为 ?id=123&name=john'
                var url = window.location.search,reg,retVal;
                /*
                 * 其中正则详解：
                 * (^\?|&)以？或者&开头的字符
                 * name是传进来的参数名
                 * =([^&]*)(&|$)表示=后面&前面或者到结束的非&的0+个字符
                 * 通过()组合方式，并且不把RegExp设置为全局g，可以通过match方法返回匹配到的字符串和pattern数组
                 * */
                return name?(reg = new RegExp("(^\\?|&)"+name+"=([^&]*)(&|$)"),retVal = url.match(reg),$.isArray(retVal)&&retVal.length>=3?
                    retVal[2]:''):'';
            }
        });
        //修改参数名来进行调试
        //$('#result').html($.getRequestParameter('name'));

        (function($) {
            $.extend({
                myTime: {
                    /**
                     * 当前时间戳
                     * @return <int>        unix时间戳(秒)
                     */
                    CurTime: function(){
                        return Date.parse(new Date())/1000;
                    },
                    /**
                     * 日期 转换为 Unix时间戳
                     * @param <string> 2014-01-01 20:20:20  日期格式
                     * @return <int>        unix时间戳(秒)
                     */
                    DateToUnix: function(string) {
                        var f = string.split(' ', 2);
                        var d = (f[0] ? f[0] : '').split('-', 3);
                        var t = (f[1] ? f[1] : '').split(':', 3);
                        return (new Date(
                            parseInt(d[0], 10) || null,
                            (parseInt(d[1], 10) || 1) - 1,
                            parseInt(d[2], 10) || null,
                            parseInt(t[0], 10) || null,
                            parseInt(t[1], 10) || null,
                            parseInt(t[2], 10) || null
                        )).getTime() / 1000;
                    },
                    /**
                     * 时间戳转换日期
                     * @param <int> unixTime    待时间戳(秒)
                     * @param <bool> isFull    返回完整时间(Y-m-d 或者 Y-m-d H:i:s)
                     * @param <int>  timeZone   时区
                     */
                    UnixToDate: function(unixTime, isFull, timeZone) {
                        if (typeof (timeZone) == 'number')
                        {
                            unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60;
                        }
                        var time = new Date(unixTime * 1000);
                        var ymdhis = "";
                        ymdhis += time.getUTCFullYear() + "-";
                        ymdhis += (time.getUTCMonth()+1) + "-";
                        ymdhis += time.getUTCDate();
                        if (isFull === true)
                        {
                            ymdhis += " " + time.getUTCHours() + ":";
                            ymdhis += time.getUTCMinutes() + ":";
                            ymdhis += time.getUTCSeconds();
                        }
                        return ymdhis;
                    }
                }
            });
        })(jQuery);
	</script>
</body>
</html>


